<template>
  <div class="index weixinjiqiren">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：
              <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
              <router-link :to="{path:'/tousugongdan'}" style="color: #409eff;">投诉工单管理</router-link>>企业微信机器人
        </div>
        <div class="hei10"></div>

        <div style="padding: 20px;">
          <div class="kflexc" style="margin-bottom: 20px; color: #409EFF; margin-right: 20px;" v-if="!corp_id">
            <!-- <el-button type="danger" round size="medium" @click="addlog">添加机器人</el-button> -->
            <div style=" margin-right: 20px;">还未绑定企微账号</div>
            <div><el-button type="primary" round size="medium" plain @click="addlog">绑定企微账号</el-button></div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;  color: #409EFF; " v-if="corp_id">
            <div style=" margin-right: 20px;">已绑定企微账号：{{corp_id}}</div>
            <div style=" margin-right: 20px;"><el-button type="primary" round size="medium" plain @click="addlog">修改</el-button></div>
            <div><el-button type="danger" round size="medium" plain @click="tongbu">同步企微群信息</el-button></div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 250px; margin-right: 20px;">
              <!-- <el-input v-model="search.robot_id" placeholder="请输入机器人ID"></el-input> -->
              <el-input v-model="search.robot_id" placeholder="请输入群名称"></el-input>
            </div>
            <div style="width: 250px; margin-right: 20px;">
              <el-select clearable v-model="search.share_id" style="width: 100%;" filterable placeholder="选择分销商">
                <el-option :label="item.name" :value="item.id"  v-for="item in fenxiaoshanglists" :key="item.id" ></el-option>
              </el-select>

            </div>
            <el-button type="danger" round  style="margin-right: 20px;" @click="searchgo()">搜索</el-button>
          </div>

          <div class="zhiboxitong_table">
            <el-table :data="list" border style="width: 100%" align="center">
              <!-- <el-table-column prop='id' label="机器人ID"></el-table-column>
              <el-table-column prop='web_hook' label="web_hook地址"></el-table-column> -->
              <el-table-column prop='wechat_name' label="所属企微群名称"> </el-table-column>
              <el-table-column prop='share_name' label="对应分销商"> </el-table-column>
              <el-table-column prop='message_count' label="播报数量"> </el-table-column>
              <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">

                  <el-button size="mini" type="text" @click="xiugai(scope.row)">编辑</el-button>
                  <!-- <el-button size="mini" type="text">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;">
              <el-pagination background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye" :page-size="search.page_size"
               :total="total"></el-pagination>
            </div>
        </div>


        </div>
      </div>
    </div>
    <el-dialog title="绑定企微账号" :visible.sync="log" width="360px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div style="margin-bottom: 20px;">
        <el-input v-model="corp_id2" placeholder="请输入企微ID"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="addgo()">确认</el-button>
      </span>
    </el-dialog>
    <!-- <foot></foot> -->
    <el-dialog title="编辑分销商" :visible.sync="log2" width="360px">
      <div style="margin-bottom: 20px;">
        <el-select clearable v-model="all.share_id" style="width: 100%;" filterable placeholder="选择分销商">
          <el-option :label="item.name" :value="item.id"  v-for="item in fenxiaoshanglists" :key="item.id" ></el-option>
        </el-select>
      </div>
      <div style="margin-bottom: 20px;">
        <el-input v-model="all.wechat_name" placeholder="请输入所属企微群名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log2 = false">取消</el-button>
        <el-button type="primary" @click="addgo2()">确认</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import moment from 'moment'
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  export default {
    components: {
      top,left
    },
    name: "zhiboxitong",
    data() {
      return {
          search:{
            page:1,
            page_size:20,
            robot_id:"",
            share_id:""
          },
          total:0,
          list:[],
          fenxiaoshanglists:[],
          log:false,
          corp_id:"",
          corp_id2:"",
          all:{
            share_id:"",
            wechat_name:"",
            id:""
          },
          log2:false

      }
    },
    created() {
      this.getlist()
      this.getlist2()



      axios.get("/api/plan-market/all/partner/list")
        .then(response => {
          if(response.data.msg.code == 0){
            this.fenxiaoshanglists = response.data.data

          }else{
            this.$message.error(response.data.msg.info);
          }
        });
    },
    mounted() {

    },
    methods: {
      addgo2:function(){
        axios.post("/api/plan-market/wechat/robot",this.all)
          .then(response => {
            if(response.data.msg.code == 0){
              this.$message.success('编辑成功');
              this.log2 = false
              this.getlist()
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      tongbu:function(){
        axios.get("/api/plan-market/wechart/get/group/list")
          .then(response => {
            if(response.data.msg.code == 0){
              this.$message.success('操作成功');
              this.getlist()
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      addlog:function(){
        this.corp_id2 = this.corp_id
        this.log = true
      },
      xiugai:function(item){
        this.all = {
          share_id:item.share_id,
          web_hook:item.web_hook,
          wechat_name:item.wechat_name,
          id:item.id
        }
        this.log2 = true
      },
      searchgo:function(){
        this.search.page = 1
        this.getlist()
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
      addgo:function(){

        axios.post("/api/plan-market/wechart/set/shop/config",{corp_id:this.corp_id2})
          .then(response => {
            if(response.data.msg.code == 0){
              this.$message.success('添加成功');
              this.getlist2()
              this.log = false
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getlist2:function(){
        axios.get("/api/plan-market/wechart/get/shop/config")
          .then(response => {
            if(response.data.msg.code == 0){
              this.corp_id = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getlist:function(){
        axios.get("/api/plan-market/wechat/robot/list",{params:this.search})
          .then(response => {
            if(response.data.msg.code == 0){
              this.list = response.data.data.data
              this.total = response.data.data.total
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }

    }
  }
</script>

<style scoped lang="scss">
  .weixinjiqiren {
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
  }
</style>
